<template>
<div>
  <div style="min-width: 1100px">
    <div class="licc-data-center-transaction-filter-top">
      <el-form :model="filterTransaction" ref="filterTransaction"  label-width="80px">
        <el-row>
          <el-col :span="7">
            <el-form-item label="支付时间" class="licc-data-center-transaction-filter-form-item">
              <el-date-picker
                style="width: 220px"
                size="small"
                v-model="payDatePickerValue"
                value-format="yyyy-MM-dd HH:mm:SS"
                :picker-options="allPickerOptions"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="申退时间" class="licc-data-center-transaction-filter-form-item">
              <el-date-picker
                style="width: 220px"
                size="small"
                v-model="applayReturnDatePickerValue"
                value-format="yyyy-MM-dd HH:mm:SS"
                :picker-options="allPickerOptions"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="退款时间" class="licc-data-center-transaction-filter-form-item">
              <el-date-picker
                style="width: 220px"
                size="small"
                v-model="returnDatePickerValue"
                value-format="yyyy-MM-dd HH:mm:SS"
                :picker-options="allPickerOptions"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item
              class="licc-data-center-transaction-filter-form-item"
              label="选择分值"
              prop="points">
              <el-select v-model="filterTransaction.type" clearable placeholder="请选择" style="width: 220px" size="small">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              class="licc-data-center-transaction-filter-form-item"
              label="交易编号"
              prop="transactionSn"
              :rules="[{trigger: 'blur', validator: validateNumRule}]">
              <el-input v-model="filterTransaction.transactionSn" placeholder="交易编号" style="width: 220px" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              label="订单编号"
              class="licc-data-center-transaction-filter-form-item"
              prop="orderSn"
              :rules="[{trigger: 'blur', validator: validateNumRule}]">
              <el-input v-model="filterTransaction.orderSn" placeholder="请输入订单编号" style="width: 220px" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item
              class="licc-data-center-transaction-filter-form-item"
              label="手机号"
              prop="phone"
              :rules="[{trigger: 'blur', validator: validatePhoneRule}]">
              <el-input v-model="filterTransaction.phone" placeholder="交易人手机号" style="width: 220px" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              class="licc-data-center-transaction-filter-form-item"
              label="金额范围"></el-input>
              <el-input v-model="filterTransaction.minAmount" style="width: 105px" size="small" ></el-input> - <el-input v-model="filterTransaction.maxAmount" style="width: 105px" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="2">
            <el-button type="info" size="small" @click="restTransactionButton">重 置</el-button>
            <el-button type="primary" size="small" @click="filterTransactionButton">筛 选</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <el-table
        stripe
        border
        :data="transactionInfos">
        <el-table-column type="index" width="30"></el-table-column>
        <el-table-column prop="transactionSn" label="交易编号"></el-table-column>
        <el-table-column prop="orderSn" label="订单编号"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="amount" label="金额"></el-table-column>
        <el-table-column prop="type" label="状态">
          <template slot-scope="scope">
            <el-tag :type="orderStatusType(scope.row.type)">
              {{orderStatusShowText(scope.row.type)}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="payTime" label="支付时间"></el-table-column>
        <el-table-column prop="applayReturnTime" label="申退时间"></el-table-column>
        <el-table-column prop="returnTime" label="退款时间"></el-table-column>
        <el-table-column fixed="right" width="185" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              :disabled="buttonDisabled(scope.row.type, 1)"
              @click="handleInfo(scope.$index, scope.row)">详情</el-button>
            <el-button
              size="mini"
              type="danger"
              :disabled="buttonDisabled(scope.row.type, 2)"
              @click="handleReturn(scope.$index, scope.row)">退款</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 35, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="goodsTotal">
      </el-pagination>
    </div>
  </div>
  <div>
    <el-dialog :title="transDialogTitle" :visible.sync="transDialogVisible" width="40%">
         <span>
          <trans-info v-if="transDialogVisible" :message="orderAllInfo"></trans-info>
        </span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="transDialogVisible = false">返 回</el-button>
        </span>
    </el-dialog>
  </div>
</div>
</template>

<script>
  import dataCenterApi from '@/api/backstage/dataCenter'
  import TransInfo from './components/transInfo'
  import Code from '@/utils/code'
  export default {
    name: 'Goods_listInfo',
    components: {
      TransInfo
    },
    data() {
      return {
        filterTransaction:{

        },
        typeOptions:[{
          value: 1,
          label: '完成'
        }, {
          value: 2,
          label: '退款中'
        }, {
          value: 3,
          label: '已退款'
        }],
        typeFilters:[
          {text:'完成',value:1,type:'success'},
          {text:'退款中',value:2,type:'warning'},
          {text:'已退款',value:3,type:'danger'},
        ],
        payDatePickerValue:'',
        applayReturnDatePickerValue:'',
        returnDatePickerValue:'',
        allPickerOptions:{
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
        params:{},
        /** 交易信息 **/
        transactionInfos:[],
        currentPage: 1,
        pagesize:20,
        goodsTotal:0,
        /** 交易详情 **/
        orderAllInfo:{},
        /** 交易详情标题 **/
        transDialogTitle:'',
        /** 交易详情显示 **/
        transDialogVisible: false,
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        dataCenterApi.getTransactionInfos(this.params, this.currentPage, this.pagesize).then(res => {
          this.transactionInfos = res.data.records;
          this.goodsTotal = res.data.total;
        }).catch(() => {
          this.$notify.error({title:'失败', message:'获取交易信息失败，请稍后再试！'});
        });
      },
      validateNumRule(rule, value, callback){
        if (typeof (value) == 'undefined'||value==null||value===''){
          callback()
        } else if (value.length < 3||value.length>20){
          callback(new Error('只能由3-20位字符组成'));
        } else {
          callback();
        }
      },
      validatePhoneRule(rule, value, callback){
        if (typeof (value) == 'undefined'||value==null||value===''){
          callback()
        } else if (value.length < 3||value.length>20){
          callback(new Error('只能由3-11位字符组成'));
        } else {
          callback();
        }
      },
      /** 分页---开始 **/
      handleSizeChange(val) {
        this.pagesize = val;
        this.initData();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.initData();
      },
      /** 分页---结束 **/

      /** 订单状态标签 **/
      orderStatusType(value){
        /** 拿到该行的值，然后遍历typeFilters拿到对应标签的样式 **/
        for (let i = 0; i < this.typeFilters.length; i++){
          if (value === this.typeFilters[i].value){
            return this.typeFilters[i].type;
          }
        }
        return "";
      },
      /** 订单状态值 **/
      orderStatusShowText(value){
        /** 拿到该行的值，然后遍历typeFilters拿到对应标签的名称 **/
        for (let i = 0; i < this.typeFilters.length; i++) {
          if (value === this.typeFilters[i].value) {
            return this.typeFilters[i].text;
          }
        }
        return value;
      },
      /** 是否可点击 **/
      buttonDisabled(type, index){
        if (index == 1){
          return false;
        } else if (type == 2){
          return false;
        } else {
          return true;
        }
      },
      /** 查看详情 **/
      handleInfo(index, row){
        this.orderAllInfo = {};
        this.transDialogTitle = '';
        this.transDialogTitle = '交易编号 - '+row.transactionSn;
        this.orderAllInfo = row;
        this.transDialogVisible = true;
      },
      /** 退款 **/
      handleReturn(index, row){
        let transConfirmTitle = "该操作将会退款交易编号为“"+row.transactionSn+"”和订单号为“"+row.orderSn+"”的交易信息"
        this.$confirm(transConfirmTitle, '退款', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          dataCenterApi.transactionReturnById({id: row.id}).then(res => {
            if (res.code == Code.SUCC) {
              this.$notify.success({title:'成功', message: '交易编号为“'+row.transactionSn+'”的交易成功退款'});
              this.initData();
            } else {
              this.$notify.success({title:'提示', message: res.data.message});
            }
          }).catch(() => {
            this.$notify.error({title:'失败', message:'支付宝沙箱操作异常，请稍后再试！'});
          })
        }).catch(() => {
          this.$notify.info({title:'取消', message:'已取消退款操作'});
        });
      },
      /** 重置筛选信息 **/
      restTransactionButton(){
        this.payDatePickerValue = "";
        this.applayReturnDatePickerValue = "";
        this.returnDatePickerValue = "";
        this.filterTransaction={};
        this.$nextTick(() => this.$refs['filterTransaction'].clearValidate())
        this.currentPage = 1;
        this.params = {}
        this.initData();
      },
      /** 筛选信息 **/
      filterTransactionButton(){
        this.$refs['filterTransaction'].validate(valid => {
          if (valid){
            this.params = {};
            let amountRule = /^([1-9]\d*|[0]{1,1})$/;
            if (typeof (this.filterTransaction.minAmount)=="undefined"||this.filterTransaction.minAmount==''){
              /** 最小值不存在 **/
              this.filterTransaction.minAmount==null;
              if (typeof (this.filterTransaction.maxAmount)=="undefined"||this.filterTransaction.maxAmount==''){
                /** 最大值不存在 **/
                this.filterTransaction.maxAmount==null;
              } else if(this.filterTransaction.maxAmount>0&&amountRule.test(this.filterTransaction.maxAmount)){
                /** 最大值存在且大于0 **/
              } else {
                /** 最大值不合规 **/
                this.$notify.warning({title:'提示', message: "金额筛选最大值是必须大于0的整数"});
              }
            } else if(this.filterTransaction.minAmount>=0&&amountRule.test(this.filterTransaction.minAmount)){
              /** 最小值存在且大于等于0 **/
              if (typeof (this.filterTransaction.maxAmount)=="undefined"||this.filterTransaction.maxAmount==''){
                /** 最大值不存在 **/
                this.filterTransaction.maxAmount==null;
              } else if(this.filterTransaction.maxAmount>0&&amountRule.test(this.filterTransaction.maxAmount)){
                /** 最大值存在且大于0 **/
                if (!this.filterTransaction.maxAmount>this.filterTransaction.minAmount) {
                  /** 最大值不大于最小值 **/
                  this.$notify.warning({title:'提示', message: "金额筛选最大值必须大于最小值"});
                }
              } else {
                /** 最大值不合规 **/
                this.$notify.warning({title:'提示', message: "金额筛选最大值是必须大于0的整数"});
              }
            } else {
              /** 最小值不合规 **/
              this.$notify.warning({title:'提示', message: "金额筛选最小值必须是大于或等于0的整数"});
            }
            this.params = this.filterTransaction;
            if (this.payDatePickerValue!=null&&this.payDatePickerValue.length==2){
              this.params.beginPayTime = this.payDatePickerValue[0];
              this.params.endPayTime = this.payDatePickerValue[1];
            }
            if (this.applayReturnDatePickerValue!=null&&this.applayReturnDatePickerValue.length==2){
              this.params.beginApplayReturnTime = this.applayReturnDatePickerValue[0];
              this.params.endApplayReturnTime = this.applayReturnDatePickerValue[1];
            }
            if (this.returnDatePickerValue!=null&&this.returnDatePickerValue.length==2){
              this.params.beginReturnTime = this.returnDatePickerValue[0];
              this.params.endReturnTime = this.returnDatePickerValue[1];
            }
            this.currentPage = 1;
            this.initData();
          } else {
            this.$notify({title: '提示', message: '输入的信息不合规', type: 'warning'});
          }
        });
      }
    }
  }
</script>
<style>
  .licc-data-center-transaction-filter-top{
    width: 100%;
    min-width: 1100px;
  }
  .licc-data-center-transaction-filter-form-item{
    margin-bottom: 12px;
  }
</style>
